import React, { Component } from 'react';
import { Link, history } from 'umi';
import { Layout, Menu, Breadcrumb, Icon, Button, ConfigProvider } from 'antd';
import zhCN from 'antd/es/locale/zh_CN';
const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

import './index.less';
import { getUserDataByToken } from '@/services/users/getUserDataByToken';
// 管理员菜单
const adminMenuData = [
  {
    menuTitle: '学生管理',
    iconObj: 'icon-xueshengguanli',
    routePath: '/admin/student',
  },
  {
    menuTitle: '教师管理',
    iconObj: 'icon-xueshengguanli',
    routePath: '/admin/teacher',
  },
  { menuTitle: '通知管理', iconObj: 'icon-xiaoxi', routePath: '/admin/notice' },
  {
    menuTitle: '可拖拽组件',
    iconObj: 'icon-admin-manage',
    routePath: '/admin/draggablecomp',
  },
];
// 学生菜单
const studentMenuData = [
  {
    menuTitle: '我的通知',
    iconObj: 'icon-wode-tongzhi',
    routePath: '/student/notice',
  },
  {
    menuTitle: '健康填报',
    iconObj: 'icon-ceshishenqing',
    routePath: '/student/health',
  },
  {
    menuTitle: '请假申请',
    iconObj: 'icon-ceshishenqing',
    routePath: '/student/leave',
  },
  {
    menuTitle: '个人信息',
    iconObj: 'icon-gerenxinxi',
    routePath: '/student/profile',
  },
];
// 教师菜单
const teacherMenuData = [
  {
    menuTitle: '健康打卡管理',
    iconObj: 'icon-ceshishenqing',
    routePath: '/teacher/health',
  },
  {
    menuTitle: '通知管理',
    iconObj: 'icon-wode-tongzhi',
    routePath: '/teacher/notice',
  },
  {
    menuTitle: '请假管理',
    iconObj: 'icon-ceshishenqing',
    routePath: '/teacher/leave',
  },
  {
    menuTitle: '个人信息',
    iconObj: 'icon-gerenxinxi',
    routePath: '/teacher/profile',
  },
];
// 用户身份数组
const userIdentity = [, '管理员', '教师', '学生'];
const baseUrl = 'http://localhost:3000/';
export default class index extends Component {
  state = {
    userInfo: {},
    MenuData: [],
  };

  componentDidMount() {
    // 获取用户数据
    this.getUserDataByToken();
  }

  // 获取用户信息
  getUserDataByToken = async () => {
    const res = await getUserDataByToken(window.localStorage.getItem('token'));
    this.setState({ userInfo: res }, () => {
      const type = this.state.userInfo.type;
      switch (type) {
        case 1:
          return this.setState({ MenuData: adminMenuData });
        case 2:
          return this.setState({ MenuData: studentMenuData });
        case 3:
          return this.setState({ MenuData: teacherMenuData });
      }
    });
  };

  //退出
  clickLogout = () => {
    history.push('/login');
    window.localStorage.removeItem('token');
  };

  render() {
    const { userInfo } = this.state;

    // 获取当前位于的菜单项
    const nowPath = history?.location?.pathname;
    let activePath = nowPath.substring(
      nowPath.lastIndexOf('/', nowPath.lastIndexOf('/') - 1),
    );
    const title = this.state.MenuData.find(
      (item) => item.routePath === activePath,
    )?.menuTitle;
    // 计算用户身份
    const identity = userIdentity[this.state.userInfo.type];
    return (
      <ConfigProvider locale={zhCN}>
        <Layout className="baseLayout">
          <Header
            className="header"
            style={{ color: 'white', display: 'flex' }}
          >
            <div className="logo">
              <i className="iconfont icon-admin-manage"></i>
              校园疫情管理系统
            </div>
            <div>
              <span className="user-info">
                欢迎用户
                <i>{userInfo.username}</i>
                <img
                  src={userInfo.head && baseUrl + userInfo.head}
                  alt="头像"
                />
              </span>
              <Button type="primary" onClick={this.clickLogout}>
                退出
              </Button>
            </div>
          </Header>
          <Layout>
            {/* 菜单 */}
            <Sider width={200} style={{ background: '#fff' }}>
              <Menu
                mode="inline"
                style={{ height: '100%', borderRight: 0 }}
                theme="dark"
                defaultSelectedKeys={[activePath]}
              >
                {this.state.MenuData.map((item, index) => {
                  return (
                    <Menu.Item key={item.routePath}>
                      <Link
                        to={`/user${item.routePath}`}
                        style={{ color: 'white' }}
                      >
                        <i
                          className={'iconfont ' + item.iconObj || ''}
                          style={{ marginRight: '10px', fontSize: '20px' }}
                        ></i>
                        {item.menuTitle}
                      </Link>
                    </Menu.Item>
                  );
                })}
              </Menu>
            </Sider>
            {/* 菜单项具体页面 */}
            <Layout style={{ padding: '0 24px 24px' }}>
              {/* 面包屑 */}
              <Breadcrumb style={{ margin: '16px 0' }}>
                <Breadcrumb.Item>{identity}</Breadcrumb.Item>
                <Breadcrumb.Item>{title}</Breadcrumb.Item>
              </Breadcrumb>
              {/* 主体内容 */}
              <Content
                style={{
                  background: '#fff',
                  padding: 24,
                  margin: 0,
                  minHeight: 280,
                }}
              >
                {this.props.children}
              </Content>
            </Layout>
          </Layout>
        </Layout>
      </ConfigProvider>
    );
  }
}
